<template>
  <div style="min-width: 1200px">
    <div v-if="$route.path == '/satisfaction'">
      <div class="vs-search-box">
        <div class="vs-search-title">客户满意度分析</div>
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              @change="setDate"
              v-model="value1"
              value-format="yyyy-MM-dd"
              style="width: 250px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
            <el-button icon="el-icon-download" @click="derive" :loading="isDerive">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-search-box">
        <div class="vs-search-title">项目满意度</div>
        <el-table :data="article" border style="width: 100%">
          <el-table-column prop="name" label="项目名称" width="180">
          </el-table-column>
          <el-table-column prop="commentCount" label="评价次数" width="180">
          </el-table-column>
          <el-table-column label="平均评价星级" prop="average">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.average"
                disabled
                :show-score="false"
                :show-text="false"
                text-color="#ff9900"
              >
              </el-rate>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="vs-search-box">
        <div class="vs-search-title">技师满意度</div>
        <el-table :data="technician" border style="width: 100%">
          <el-table-column prop="name" label="项目名称" width="180">
          </el-table-column>
          <el-table-column prop="commentCount" label="评价次数" width="180">
          </el-table-column>
          <el-table-column prop="average" label="平均评价星级">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.average"
                disabled
                :show-score="false"
                :show-text="false"
                text-color="#ff9900"
              >
              </el-rate>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="vs-search-box">
        <div class="vs-search-title">前台服务满意度</div>
        <el-table :data="reception" border style="width: 100%">
          <el-table-column prop="name" label="项目名称" width="180">
          </el-table-column>
          <el-table-column prop="commentCount" label="评价次数" width="180">
          </el-table-column>
          <el-table-column prop="average" label="平均评价星级">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.average"
                disabled
                :show-score="false"
                :show-text="false"
                text-color="#ff9900"
              >
              </el-rate>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="vs-search-box">
        <div class="vs-search-title">环境氛围满意度</div>
        <div v-if="lists && lists.environment">
          <div class="atmosphere">
            <el-rate
              class="star"
              v-model="value2"
              disabled
              :show-score="false"
              :show-text="false"
              text-color="#ff9900"
            >
            </el-rate>
            <div class="allTimes">
              <div
                v-if="lists && lists.environment && lists.environment.type5"
                class="pl_line"
                :style="
                  'width:' +
                  Math.floor((lists.environment.type5 / allTimes) * 100) +
                  '%'
                "
              ></div>
              <span
                v-if="lists && lists.environment && lists.environment.type5"
                class="pl_text"
                >{{ lists.environment.type5 }}</span
              >
              <span v-else>0</span>
            </div>
          </div>
          <div class="atmosphere1">
            <el-rate
              class="star1"
              v-model="value3"
              disabled
              :show-score="false"
              :show-text="false"
              text-color="#ff9900"
            >
            </el-rate>
            <div class="allTimes">
              <div
                v-if="lists && lists.environment && lists.environment.type4"
                class="pl_line"
                :style="
                  'width:' +
                  Math.floor((lists.environment.type4 / allTimes) * 100) +
                  '%'
                "
              ></div>
              <span
                v-if="lists && lists.environment && lists.environment.type4"
                class="pl_text"
                >{{ lists.environment.type4 || 0 }}</span
              >
              <span v-else>0</span>
            </div>
          </div>
          <div class="atmosphere2">
            <el-rate
              class="star2"
              v-model="value4"
              disabled
              :show-score="false"
              :show-text="false"
              text-color="#ff9900"
            >
            </el-rate>
            <div class="allTimes">
              <div
                v-if="lists && lists.environment && lists.environment.type3"
                class="pl_line"
                :style="
                  'width:' +
                  Math.floor((lists.environment.type3 / allTimes) * 100) +
                  '%'
                "
              ></div>
              <span
                v-if="lists && lists.environment && lists.environment.type3"
                class="pl_text"
                >{{ lists.environment.type3 || 0 }}</span
              >
              <span v-else>0</span>
            </div>
          </div>
          <div class="atmosphere3">
            <el-rate
              class="star3"
              v-model="value5"
              disabled
              :show-score="false"
              :show-text="false"
              text-color="#ff9900"
            >
            </el-rate>
            <div class="allTimes">
              <div
                v-if="lists && lists.environment && lists.environment.type2"
                class="pl_line"
                :style="
                  'width:' +
                  Math.floor((lists.environment.type2 / allTimes) * 100) +
                  '%'
                "
              ></div>
              <span
                v-if="lists && lists.environment && lists.environment.type2"
                class="pl_text"
                >{{ lists.environment.type2 || 0 }}</span
              >
              <span v-else>0</span>
            </div>
          </div>
          <div class="atmosphere4">
            <el-rate
              class="star4"
              v-model="value6"
              disabled
              :show-score="false"
              :show-text="false"
              text-color="#ff9900"
            >
            </el-rate>
            <div class="allTimes">
              <div
                v-if="lists && lists.environment && lists.environment.type1"
                class="pl_line"
                :style="
                  'width:' +
                  Math.floor((lists.environment.type1 / allTimes) * 100) +
                  '%'
                "
              ></div>
              <span
                v-if="lists && lists.environment && lists.environment.type1"
                class="pl_text"
                >{{ lists.environment.type1 || 0 }}</span
              >
              <span v-else>0</span>
            </div>
          </div>
        </div>
        <div v-else class="noData">暂无数据</div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allTimes: 0, //环境氛围满意度
      value2: 5,
      value3: 4,
      value4: 3,
      value5: 2,
      value6: 1,
      value1: "",
      paging: {
        store_id: 0,
        start_time: "", //开始时间
        end_time: "", //结束时间
        page: 1,
        total: 0,
        limit: 10,
      },
      lists: [], //客户满意度信息
      article: [
        {
          //项目满意度
          id: "",
          name: "",
          commentCount: "", //评价次数
          average: 0, //平均评价星级
        },
      ],
      technician: [
        //技师满意度
        {
          id: "",
          name: "",
          commentCount: "", //评价次数
          average: 0, //平均评价星级
        },
      ],
      reception: [
        //前台满意度
        {
          id: "",
          name: "",
          commentCount: "", //评价次数
          average: 0, //平均评价星级
        },
      ],

      isDerive:false,
      shopList: [], //获取门店信息
    };
  },
  created() {
    let date1 = this.getCurrentMonthFirst();
    let date2 = this.getCurrentMonthLast();
    this.getUserSatisfied();
    this.paging.start_time = date1;
    this.paging.end_time = date2;
    this.value1 = [date1, date2];
    this.homegetStore();
  },
  methods: {
    //客户满意度分析导出
      async derive(){
            this.isDerive = true;
            let res = await this.$Http.exportUserSatisfied(this.paging);
            this.utils.downloadXlsx(res,'客户满意度分析')
            this.isDerive = false;
        },
    async homegetStore() {
      //获取门店
      let { code, data } = await this.$Http.homegetStore(this.paging);
      if (code) {
        let obj = {
          title: "全部",
          id: 0,
        };
        this.shopList = [obj, ...data];
      }
    },
    getCurrentMonthFirst() {
      //获取当月第一天的值
      var date = new Date();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },

    getCurrentMonthLast() {
      //获取当月最后一天的值
      var date = new Date();
      var currentMonth = date.getMonth();
      var nextMonth = ++currentMonth;
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      var oneDay = 1000 * 60 * 60 * 24;
      var lastTime = new Date(nextMonthFirstDay - oneDay);
      var month = parseInt(lastTime.getMonth() + 1);
      var day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },

    async getUserSatisfied() {
      //客户满意度分析
      let { code, data } = await this.$Http.getUserSatisfied(this.paging);
      if (code) {
        this.lists = data;
        this.article = this.lists.project;
        this.technician = this.lists.tech;
        this.reception = this.lists.reception;
        if (data && data.environment) {
          this.allTimes =
            data.environment.type1 +
            data.environment.type2 +
            data.environment.type3 +
            data.environment.type4 +
            data.environment.type5;
        }
        console.log(9999999, this.lists);
        console.log(888888, this.allTimes);
        console.log(54545454, this.article, this.technician, this.reception);
      }
    },
    setDate(e) {
      this.paging.start_time = e[0];
      this.paging.end_time = e[1];
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.getUserSatisfied();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      console.log(11111111, this.lists);
      this.getUserSatisfied();
    },
  },
};
</script>

<style lang="scss" scoped>
.atmosphere {
  width: 600px;
  height: 30px;
  margin: auto;
  .star {
    float: left;
  }
}

.atmosphere1 {
  width: 600px;
  height: 30px;
  margin: auto;
  .star1 {
    float: left;
  }
}

.atmosphere2 {
  width: 600px;
  height: 30px;
  margin: auto;
  .star2 {
    float: left;
  }
}

.atmosphere3 {
  width: 600px;
  height: 30px;
  margin: auto;
  .star3 {
    float: left;
  }
}

.atmosphere4 {
  width: 600px;
  height: 30px;
  margin: auto;
  .star4 {
    float: left;
  }
}
.allTimes {
  width: 400px;
  height: 16px;
  display: flex;
  align-items: center;
  .pl_line {
    margin-left: 10px;
    background-color: #d3d3d3;
    border-radius: 8px;
    height: 16px;
  }
  .pl_text {
    margin-left: 10px;
  }
}
.noData {
  text-align: center;
  color: rgb(144, 147, 153);
}
</style>